<template>
	<view>
		<view class='record-box fill-base'>
			<view class='record-item rel b-1px-l' :style="{padding:index==list.length -1?'0 0 0 30rpx':''}"
				v-for="(item,index) in list" :key="index">


				<view class="item-tag flex-center fill-base abs">
					<view class="tag-dot fill-base radius"
						:style="{borderColor: info[item.time] ? primaryColor : '',background: info[item.time] ? primaryColor : ''}">
					</view>
				</view>

				<view class="flex-between flex-1 item-text f-paragraph c-title">
					<view class="text-bold">{{item.title}}</view>
					<view class="f-icontext" style="color:#979797">
						{{info[item.time]? info[item.time] :item.title == '签字确认' && !info.sign_img ? '暂未签字确认' :  '状态未开始' }}
					</view>
				</view>
				<view
					v-if="item.img && info[item.img] && (!['user','coach'].includes(type) || (type == 'user' && !configInfo.hide_coach_image) || (type == 'coach' && (![5,7].includes(item.pay_type) || ([5,7].includes(item.pay_type) && (!info.hide_order_user_info || (info.hide_order_user_info && ![-1,7].includes(info.pay_type)))))))">
					<!-- #ifdef H5 -->
					<view @tap.stop="toPreviewImage(item.img)" class="item-img mt-md radius-5">
						<view class="h5-image item-img mt-md radius-5"
							:style="{ backgroundImage : `url('${info[item.img]}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image @tap.stop="toPreviewImage(item.img)" mode="aspectFill" class="item-img mt-md radius-5"
						:src="info[item.img]">
					</image>
					<!-- #endif -->
				</view>
				<view @tap.stop="toMap(item)" class="mt-md f-desc" :style="{color:primaryColor}"
					v-if="item.addr && info[item.addr] && (type != 'coach' || (type == 'coach' && (![5,7].includes(item.pay_type) || ([5,7].includes(item.pay_type) && (!info.hide_order_user_info || (info.hide_order_user_info && ![-1,7].includes(info.pay_type)))))))">
					打卡地点：{{type == 'user' && item.pay_type === 3 ?info[item.addr].split(' ')[0]:info[item.addr]}}<span
						class="c-warning" v-if="type!='user' && info.map_type.includes(item.pay_type)">（手动修改）</span>
				</view>
				<view @tap.stop="toMap(item)" class="mt-md f-desc" :style="{color:primaryColor}"
					v-if="item.time == 'order_end_time'&&info.coach_sign_time">
					打卡时间：{{info.coach_sign_time}}<span class="c-warning">（{{$t('action.attendantName')}}打卡）</span>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name: 'timeline',
		props: {
			list: {
				type: Array,
				default () {
					return {}
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			type: {
				type: String,
				default () {
					return '' // user用户端；coach技-师；admin管理员；agent代-理商
				}
			}
		},
		data() {
			return {
				rgbaColor: ''
			}
		},
		mounted() {
			this.rgbaColor = this.$util.rgbColor(this.primaryColor, 0.15)
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		methods: {
			toPreviewImage(key) {
				let current = this.info[key]
				// #ifdef APP-PLUS 
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.WRITE_EXTERNAL_STORAGE') === 'undetermined') {
					this.$refs.preview_image_item
						.previewImage({
							current,
							urls: [current]
						})
				} else {
					this.$util.previewImage({
						current,
						urls: [current]
					})
				}
				// #endif
				// #ifndef APP-PLUS
				this.$util.previewImage({
					current,
					urls: [current]
				})
				// #endif  
			},
			// 查看定位
			async toMap(item) {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				let arr = item.addr.split('_')[0]
				let {
					info
				} = this

				// #ifdef APP-PLUS
				let addr = info[key].split(' ')
				this.$util.goMap({
					lat: info[`${arr}_lat`] * 1,
					lng: info[`${arr}_lng`] * 1,
					address: addr[0],
					address_info: addr.length > 1 ? addr[1] : ''
				})
				return
				// #endif

				let name = info[item.addr]
				if (this.type == 'user' && item.pay_type === 3) {
					name = name.split(' ')[0]
				}
				let latitude = info[`${arr}_lat`] * 1
				let longitude = info[`${arr}_lng`] * 1
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude,
					longitude,
					name,
					scale: 28
				})
			},
			toSign() {
				let {
					id
				} = this.info
				let url = `/user/pages/order/sign?id=${id}`
				this.$util.goUrl({
					url
				})
			}
		},
	}
</script>

<style lang="scss">
	.record-item {
		padding: 0 0 60rpx 30rpx;

		.item-tag {
			width: 36rpx;
			height: 36rpx;
			top: 0;
			left: -18rpx;

			.tag-dot {
				width: 18rpx;
				height: 18rpx;
				border: 2rpx solid #979797;
				transform: rotateZ(360deg);
			}
		}

		.item-text {
			height: 36rpx;
			line-height: 36rpx;
		}

		.item-img {
			width: 125rpx;
			height: 125rpx;
			border-radius: 8rpx;
		}

		.item-btn {
			width: 160rpx;
			height: 64rpx;
			background: #EEEEEE;
		}
	}

	.record-item.b-1px-l::before {
		border-left: 2px solid #ccc;
	}

	.record-item:last-child {
		padding-bottom: 0;
	}
</style>